/*
 * @Author: silas 
 * @Date: 2021-03-17 15:50:21 
 * @Last Modified by: silas
 * @Last Modified time: 2021-04-30 19:18:27
 */

<template>
    <div class="compilationSummary">
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="100px"
                class="formList"
            >
                <el-form-item label="账期" size="mini">
                    <el-date-picker v-model="form.month" type="month" value-format="yyyyMM"></el-date-picker>
                </el-form-item>
                <el-form-item label="投资渠道" size="mini">
                    <el-select
                        v-model="form.channel"
                        clearable
                        multiple
                        collapse-tags
                    >
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in channelList"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="投资时段" size="mini">
                    <el-select
                        v-model="form.years"
                        clearable
                        multiple
                        collapse-tags
                    >
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in yearsList"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工程状态" size="mini">
                    <el-select
                        v-model="form.status"
                        clearable
                        multiple
                        collapse-tags
                    >
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in statusList"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="需求管理员部门" size="mini">
                    <el-select
                        class="my"
                        v-model="form.person1"
                        clearable
                        multiple
                        collapse-tags
                    >
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in person1"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工程管理员部门" size="mini">
                    <el-select
                        class="my"
                        v-model="form.person2"
                        clearable
                        multiple
                        collapse-tags
                    >
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in person2"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="建设单位" size="mini">
                    <el-select
                        v-model="form.construction"
                        clearable
                        multiple
                        collapse-tags
                    >
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in construction"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预算管理单位" size="mini">
                    <el-select
                        v-model="form.unit"
                        clearable
                        multiple
                        collapse-tags
                    >
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in unitList"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <!-- ah -->
                <el-form-item size="mini" style="width: 19%;">
                    <div class="g-btn-wrapper">
                        <div class="g-cell">
                            <el-button
                                size="mini"
                                style="margin-left: 12px"
                                type="primary"
                                @click="search"
                                >查询</el-button
                            >
                            <el-button
                                size="mini"
                                type="orange"
                                @click="handle_export"
                                >导出</el-button
                            >
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
         <p class="g-unit">单位: 万元</p>
        <div class="table-content clearfix">
            <div class="tableBox">
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    height="73vh"
                    stripe
                >
                    <el-table-column
                        label="一级专业"
                        width="120"
                        prop="yjzyK"
                    />
                    <el-table-column
                        label="在建工程年初数"
                        min-width="120"
                        prop="zjgcncs"
                    />
                    <el-table-column
                        label="本年增加数"
                        min-width="120"
                        prop="yearIncrease"
                    />
                    <el-table-column
                        label="本年转固额"
                        min-width="120"
                        prop="bnzge"
                    />
                    <el-table-column
                        label="转固率"
                        min-width="120"
                        prop="zgPer"
                    >
                        <template slot-scope="scope">{{
                            +scope.row.zgPer > 0 ? scope.row.zgPer + "%" : "0"
                        }}</template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from "file-saver";
import XLSX from "xlsx";
const exportUrl = prefixAPI.pack;
export default {
    name: "constructionUse",
    data() {
        return {
            form: {
                unit: "",
                channel: "",
                construction: "",
                years: "",
                status: "",
                id: "",
                id2: "",
                person1: "",
                person2: "",
                month: '',
            },
            tableData: [],
            tableLoading: false,
            status: [],
            unitList: [],
            channelList: [],
            construction: [],
            yearsList: [],
            statusList: [],
            idList: [],
            idList2: [],
            person1: [],
            person2: [],

            maxUnit: "",
            maxChannel: "",
            maxYears: "",
            maxStatus: "",
            maxId: "",
            maxConstruction: "",
            maxPerson1: "",
            maxPerson2: "",
        };
    },
    watch: {
        "form.channel"(newValue, oldValue) {
            if (this.form.channel.indexOf("all") >= 0) {
                var data = [];
                this.channelList.map((it) => {
                    data.push(it);
                });
                this.form.channel = data;
            }
            if (this.form.channel.indexOf("cancel") >= 0) {
                this.form.channel = [];
            }
        },
        "form.unit"(newValue, oldValue) {
            if (this.form.unit.indexOf("all") >= 0) {
                var data = [];
                this.unitList.map((it) => {
                    data.push(it);
                });
                this.form.unit = data;
            }
            if (this.form.unit.indexOf("cancel") >= 0) {
                this.form.unit = [];
            }
        },
        "form.channel"(newValue, oldValue) {
            if (this.form.channel.indexOf("all") >= 0) {
                var data = [];
                this.channelList.map((it) => {
                    data.push(it);
                });
                this.form.channel = data;
            }
            if (this.form.channel.indexOf("cancel") >= 0) {
                this.form.channel = [];
            }
        },
        "form.years"(newValue, oldValue) {
            if (this.form.years.indexOf("all") >= 0) {
                var data = [];
                this.yearsList.map((it) => {
                    data.push(it);
                });
                this.form.years = data;
            }
            if (this.form.years.indexOf("cancel") >= 0) {
                this.form.years = [];
            }
        },
        "form.status"(newValue, oldValue) {
            if (this.form.status.indexOf("all") >= 0) {
                var data = [];
                this.statusList.map((it) => {
                    data.push(it);
                });
                this.form.status = data;
            }
            if (this.form.status.indexOf("cancel") >= 0) {
                this.form.status = [];
            }
        },
        "form.id"(newValue, oldValue) {
            if (this.form.id.indexOf("all") >= 0) {
                var data = [];
                this.idList.map((it) => {
                    data.push(it);
                });
                this.form.id = data;
            }
            if (this.form.id.indexOf("cancel") >= 0) {
                this.form.id = [];
            }
        },
        "form.person1"(newValue, oldValue) {
            if (this.form.person1.indexOf("all") >= 0) {
                var data = [];
                this.person1.map((it) => {
                    data.push(it);
                });
                this.form.person1 = data;
            }
            if (this.form.person1.indexOf("cancel") >= 0) {
                this.form.person1 = [];
            }
        },
        "form.person2"(newValue, oldValue) {
            if (this.form.person2.indexOf("all") >= 0) {
                var data = [];
                this.person2.map((it) => {
                    data.push(it);
                });
                this.form.person2 = data;
            }
            if (this.form.person2.indexOf("cancel") >= 0) {
                this.form.person2 = [];
            }
        },
        "form.construction"(val, oldValue) {
            if (this.form.construction.indexOf("all") >= 0) {
                var data = [];
                this.construction.map((it) => {
                    data.push(it);
                });
                this.form.construction = data;
            }
            if (this.form.construction.indexOf("cancel") >= 0) {
                this.form.construction = [];
            }
            $budgetAPI.getAHList({ jsdwAh: val.toString() }, (res) => {
                if (res && res.code == 0) {
                    this.unitList = res.content.GList;
                    this.maxUnit = res.content.GList.length;
                }
            });
        },
    },
    created() {
        var that = this;

        that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        that.form.areaId = that.accountInfo.areaId;
        that.form.year = that.moment().format("YYYY");
        that.getMonth();
        // this.init();
    },
    // watch: {
    //     "form.construction": {
    //         handler: function (val, oldVal) {
    //             console.log(val, oldVal);
    //             $budgetAPI.getAHList({ jsdwAh: val.toString() }, (res) => {
    //                 if (res && res.code == 0) {

    //                     this.unitList = res.content.GList;
    //                 }
    //             });
    //         },
    //     },
    // },
    // mounted() {
    //   this.init();
    // },
    methods: {
        getMonth() {
            $budgetAPI.getUnitAcctMonthLevel({}, res=> {
                if(res && res.code == 0) {
                    this.form.month = res.content;
                }
            })
        },
        //查询
        search() {
            this.getData(this.form);
        },
        getData() {
            var that = this;

            that.tableLoading = true;

            // String jsdwAh, String ysgldwG, String tzqdQ, String tzsdI, String gcztY, String xqglybmAb, String gcglybmAg
            $budgetAPI.getBuilderYjzyDataList(
                {
                    acctMonth: that.form.month,
                    ysgldwG:
                        that.form.unit.length == that.maxUnit
                            ? ""
                            : that.form.unit.toString(),
                    jsdwAh:
                        that.form.construction.length == that.maxConstruction
                            ? ""
                            : that.form.construction.toString(),
                    tzqdQ:
                        that.form.channel.length == that.maxChannel
                            ? ""
                            : that.form.channel.toString(),
                    tzsdI:
                        that.form.years.length == that.maxYears
                            ? ""
                            : that.form.years.toString(),
                    gcztY:
                        that.form.status.length == that.maxStatus
                            ? ""
                            : that.form.status.toString(),
                    xqglybmAb:
                        that.form.person1.length == that.maxPerson1
                            ? ""
                            : that.form.person1.toString(),
                    gcglybmAg:
                        that.form.person2.length == that.maxPerson2
                            ? ""
                            : that.form.person2.toString(),
                },
                (res) => {
                    if (res && res.code == 0) {
                        that.tableData = res.content;
                    }
                    that.tableLoading = false;
                }
            );
        },
        progress(event, file, fileList) {
            this.loading = this.$loading({
                lock: true,
                text: "正在导入",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
        },
        async init() {
            let that = this,
                all = await that.getList(),
                channel = all.QList,
                years = all.IList,
                status = all.YList,
                person1 = all.ABList,
                construction = all.AHList,
                person2 = all.AGList;
            // idList = await that.getIdList();

            that.maxChannel = channel.length;
            that.maxYears = years.length;
            that.maxStatus = status.length;
            that.maxPerson1 = person1.length;
            that.maxPerson2 = person2.length;
            that.maxConstruction = construction.length;

            that.channelList = channel; // 投资渠道列表
            that.yearsList = years; // 投资渠道列表
            that.statusList = status; // 获取项目状态列表
            that.construction = construction; // 获取项目状态列表
            that.person1 = person1; // 获取项目状态列表
            that.person2 = person2; // 获取项目状态列表
            // that.idList = await that.getIdList(); // 获取项目状态列表

            that.getData();
        },
        getList() {
            return new Promise((resolve) => {
                $budgetAPI.getYJAllList({}, (res) => {
                    if (res && res.code == 0) {
                        resolve(res.content);
                    } else {
                        resolve([]);
                    }
                });
            });
        },
        getIdList() {
            var that = this;

            return new Promise((resolve) => {
                $budgetAPI.getAHList({}, (res) => {
                    resolve(res.content);
                });
            });
        },
        handle_export() {
            var ysgldwG = this.form.unit,
                jsdwAh = this.form.construction,
                tzqdQ = this.form.channel,
                tzsdI = this.form.years,
                gcztY = this.form.status,
                xqglybmAb = this.form.person1,
                gcglybmAg = this.form.person2,
                month = this.form.month,
                token = getCookie("token");

            window.open(`${exportUrl}/builderYjzy/exportBuilderYjzyDataList?ysgldwG=${ysgldwG}&jsdwAh=${jsdwAh}&tzqdQ=${tzqdQ}&tzsdI=${tzsdI}&gcztY=${gcztY}&xqglybmAb=${xqglybmAb}&gcglybmAg=${gcglybmAg}&acctMonth=${month}&token=${token}`, "_self");
        }
    },
};
</script>

<style lang="scss" scoped>
.compilationSummary {
    .formList {
        margin-top: 20px;
        padding-bottom: 20px;
        .el-form-item {
            width: 27%;
            &:last-child {
                width: 19%;
            }
        }
    }
    .g-btn-wrapper {
        display: flex;
        .g-cell {
            flex: 1;
            button {
                padding: 7px 15px;
            }
        }
        .g-btns {
            text-align: right;
        }
    }
    .table-content {
        .table-header {
            display: flex;
            justify-content: space-between;

            .btn-right {
                display: flex;
            }

            .table-title {
                font-size: 14px;
                font-weight: bold;
                height: 30px;
                line-height: 30px;

                span {
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background-color: #418ee9;
                    border-radius: 1000%;
                    overflow: hidden;
                    margin-right: 10px;
                    margin-bottom: 3px;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.my {
    // background-color: red;
     .el-tag--info {
        display: inline-block;
        max-width: 80px;
        height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/deep/ .el-form-item--mini .el-form-item__content {
    line-height: 35px;
}
</style>
